import { message, Modal } from "ant-design-vue";
import { defineComponent, reactive, ref } from "vue";
import ChordSet from "./ChordSet/ChordSet";
import styles from "./index.module.less";
export default defineComponent({
  name: "index",
  setup() {
    const state = reactive({
      value: "",
      arr: [] as any,
      actived: [-1, -1],
    })
    const chordSetRef = ref(null as any);
    const doDeal = () => {
      let arr3d: any = [];
      state.value.split("\n").forEach((x: string, idx: number) => {
        let arr1: any[] = [];
        x.split("").forEach((y: string) => {
          arr1.push({
            name: y,
            chord: null,
            beat: null,
          });
        })
        arr3d.push({
          line: idx + 1,
          words: arr1,
        });
      })
      state.arr = arr3d;
    }
    const toUnshift = () => {
      if (state.actived[0] !== -1 && state.actived[1] !== -1) {
        Modal.confirm({
          title: "确认往前插入歌词?",
          okText: "确认",
          cancelText: "取消",
          onOk: () => {
            state.arr[state.actived[0]].words.splice(state.actived[1], 0, {
              name: " ",
              chord: null,
              beat: null,
            });
          }
        })
      }
    }
    const toInsert = () => {
      if (state.actived[0] !== -1 && state.actived[1] !== -1) {
        Modal.confirm({
          title: "确认往后插入歌词?",
          okText: "确认",
          cancelText: "取消",
          onOk: () => {
            state.arr[state.actived[0]].words.splice(state.actived[1] + 1, 0, {
              name: " ",
              chord: null,
              beat: null,
            });
          }
        })
      }
    }
    const toDelete = () => {
      if (state.actived[0] !== -1 && state.actived[1] !== -1) {
        if (state.arr[state.actived[0]].words[state.actived[1]].name !== ' ') {
          message.error("不能清楚非空格字符!");
          return;
        }
        Modal.confirm({
          title: "确认删除空格?",
          okText: "确认",
          cancelText: "取消",
          onOk: () => {
            state.arr[state.actived[0]].words.splice(state.actived[1], 1);
          }
        })
      }
    }
    const toSetChord = () => {
      chordSetRef.value.open();
    }
    const doChordSet = (val: any) => {
      state.arr[state.actived[0]].words[state.actived[1]].chord = val.chord;
      state.arr[state.actived[0]].words[state.actived[1]].beat = val.beat;
    }
    const toInitChord = () => {
      Modal.confirm({
        title: "确认清除和弦?",
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          state.arr[state.actived[0]].words[state.actived[1]].chord = null;
          state.arr[state.actived[0]].words[state.actived[1]].beat = null;
        }
      })
    }
    const submit = () => {
      console.log(state.arr);
    }
    return () => (
      <>
        <div class={styles.index}>
          <a-textarea style={{ height: "150px" }} v-model:value={state.value} />
          <a-button type="primary" onClick={() => { doDeal() }}>解析</a-button>
          <div class={styles.toolbar}>
            <a-button type="primary" onClick={() => { toUnshift() }}>前插空格</a-button>
            <a-button type="primary" onClick={() => { toInsert() }}>后插空格</a-button>
            <a-button type="primary" onClick={() => { toDelete() }}>删除</a-button>
            <a-button type="primary" onClick={() => { toSetChord() }}>设置和弦</a-button>
            <a-button type="primary" onClick={() => { toInitChord() }}>清除和弦</a-button>
          </div>
          <div class={styles.pages}>
            {
              state.arr.map((itemX: any, indexX) => (
                <div class={styles.line}>
                  {
                    itemX.words.map((itemY, indexY) => (
                      <div class={
                        [
                          styles.word,
                          (state.actived[0] === indexX && state.actived[1] === indexY) && styles.actived,
                          (itemY.chord || itemY.beat) && styles.hasChord,
                          ((state.actived[0] === indexX && state.actived[1] === indexY) && itemY.name === ' ') && styles.noTextActived
                        ]
                      } onClick={() => { state.actived[0] = indexX; state.actived[1] = indexY }}>
                        {itemY.name}
                        {
                          itemY.chord && (
                            <div class={styles.chord}>{itemY.chord} {itemY.beat}</div>
                          )
                        }
                      </div>
                    ))
                  }
                </div>
              ))
            }
          </div>
          <div class={styles.footer} onClick={() => { submit() }}>
            <a-button type="primary">输出json</a-button>
          </div>
        </div>
        <ChordSet ref={chordSetRef} onConfirm={(e) => { doChordSet(e) }} />
      </>
    )
  }
})